<template>
  <div>
    <div class="infoDetail" id="stationInfoDetail" v-if="showStationInfoDetail">
      <Row>
        <i-col style="text-align: right;">
          <Icon type="close-round" style="cursor:pointer;" size="20" color="#69A3C6" @click.native="showStationInfoDetail=false"></Icon>
        </i-col>
      </Row>
      <Row style="padding: 0 20px;" class="detailTitle">
        <i-col style="padding:10px 0;border-bottom:1px solid rgba(142,233,255,0.30);">
          <span style="font-size: 20px;" :style="stationColor">{{currentStationInfo.dataStation.stationName}}</span>
          <span style="font-size: 12px;color: #457387;margin-left: 5px;">「 {{currentStationInfo.dataStation.free}} 」</span>
        </i-col>
      </Row>
      <Row class="infoDetailRowBackfround">
        <i-col span="12">主要品类</i-col>
        <i-col span="12">
          <span>{{currentStationInfo.transBizType}}</span>
        </i-col>
      </Row>
      <Row class="infoDetailRow">
        <i-col span="12">货场数量</i-col>
        <i-col span="12">{{currentStationInfo.basicInfoStationCount}} 个</i-col>
      </Row>
      <Row class="infoDetailRowBackfround">
        <i-col span="12">货场面积</i-col>
        <i-col span="12">{{currentStationInfo.basicInfoInOutCount}}</i-col>
      </Row>
      <Row class="infoDetailRow">
        <i-col span="12">场站类别</i-col>
        <i-col span="12">{{stationRankRoul[currentStationInfo.stationRank].name}}「 {{stationRankRoul[currentStationInfo.stationRank].qj}} 」</i-col>
      </Row>
      <Row class="infoDetailRowBackfround">
        <i-col span="12">主要货物去向</i-col>
        <i-col span="12">{{currentStationInfo.keyPointDzmtFz}}
        </i-col>
      </Row>
      <Row class="infoDetailRow">
        <i-col span="12">主要货物来源</i-col>
        <i-col span="12">到站：{{currentStationInfo.keyPointDzmtDz}}
        </i-col>
      </Row>
      <Row class="infoDetailRowBackfround">
        <i-col span="12">能办理货运业务</i-col>
        <i-col span="12">
          <Icon type="checkmark-round" size="14" color="#A1BF50" v-if="+currentStationInfo.keyPointFreightBiz===1?true:false"></Icon>
          <Icon type="close-round" size="14" color="#C41228" v-if="+currentStationInfo.keyPointFreightBiz!==1?true:false"></Icon>
        </i-col>
      </Row>
      <Row class="infoDetailRow">
        <i-col span="12">有接取送达业务</i-col>
        <i-col span="12">
          <Icon type="checkmark-round" size="14" color="#A1BF50" v-if="+currentStationInfo.keyPointFreightJqsd===1?true:false"></Icon>
          <Icon type="close-round" size="14" color="#C41228" v-if="+currentStationInfo.keyPointFreightJqsd!==1?true:false"></Icon>
        </i-col>
      </Row>
      <Row class="infoDetailRowBackfround">
        <i-col span="12">有站内掏箱</i-col>
        <i-col span="12">
          <Icon type="checkmark-round" size="14" color="#A1BF50" v-if="+currentStationInfo.keyPointZntx===1?true:false"></Icon>
          <Icon type="close-round" size="14" color="#C41228" v-if="+currentStationInfo.keyPointZntx!==1?true:false"></Icon>
        </i-col>
      </Row>
      <Row class="infoDetailRow">
        <i-col span="12">有协议车队</i-col>
        <i-col span="12">
          <Icon type="checkmark-round" size="14" color="#A1BF50" v-if="+currentStationInfo.keyPointProtocolFleet===1?true:false"></Icon>
          <Icon type="close-round" size="14" color="#C41228" v-if="+currentStationInfo.keyPointProtocolFleet!==1?true:false"></Icon>
        </i-col>
      </Row>
      <Row class="infoDetailRowBackfround">
        <i-col span="12">有空箱回流需求</i-col>
        <i-col span="12">
          <Icon type="checkmark-round" size="14" color="#A1BF50" v-if="+currentStationInfo.keyPointKxhl===1?true:false"></Icon>
          <Icon type="close-round" size="14" color="#C41228" v-if="+currentStationInfo.keyPointKxhl!==1?true:false"></Icon>
        </i-col>
      </Row>
      <Row class="infoDetailRow">
        <i-col span="12">有站内箱源管理需求</i-col>
        <i-col span="12">
          <Icon type="checkmark-round" size="14" color="#A1BF50" v-if="+currentStationInfo.keyPointZnxygl===1?true:false"></Icon>
          <Icon type="close-round" size="14" color="#C41228" v-if="+currentStationInfo.keyPointZnxygl!==1?true:false"></Icon>
        </i-col>
      </Row>
      <Row class="infoDetailRowBackfround">
        <i-col span="12">协议车队数量</i-col>
        <i-col span="12">
          {{currentStationInfo.keyPointProtocolFleetCount?currentStationInfo.keyPointProtocolFleetCount:0}} &nbsp;个
        </i-col>
      </Row>
      <Row class="infoDetailRow">
        <i-col span="12">自有车队数量</i-col>
        <i-col span="12">
          {{currentStationInfo.keyPointOwnFleetCount?currentStationInfo.keyPointOwnFleetCount:0}} &nbsp;
        </i-col>
      </Row>
      <Row class="infoDetailRowBackfround">
        <i-col span="12">姓名</i-col>
        <i-col span="12">
          {{currentStationInfo.stationPersonName}}
        </i-col>
      </Row>
      <Row class="infoDetailRow">
        <i-col span="12">联系方式</i-col>
        <i-col span="12">
          {{currentStationInfo.stationPersonTel}}
        </i-col>
      </Row>
      <Row class="infoDetailRowBackfround">
        <i-col span="12">职位</i-col>
        <i-col span="12">
          {{currentStationInfo.stationPersonDuty}}
        </i-col>
      </Row>
    </div>
  </div>
</template>

<script>
  import moment from 'moment'

  export default {
    name: 'stationInfoDetail',
    data () {
      let stationColor = {
        color: ''
      }
      let stationRankRoul = [
        {name: '一级', qj: '100万吨以上', id: '1'},
        {name: '二级', qj: '51万吨～100万吨', id: '2'},
        {name: '三级', qj: '31万吨～50万吨', id: '3'},
        {name: '四级', qj: '11万吨～30万吨', id: '4'},
        {name: '五级', qj: '0～10万吨', id: '5'}
      ]
      let endTime = moment().subtract(1, 'days').format('YYYY-MM-DD') + ' 23:59:59'
      let dayStartTime = moment().subtract(1, 'days').format('YYYY-MM-DD') + ' 00:00:00'
      let monthStartTime = moment().subtract(1, 'days').month(moment().month() - 1).format('YYYY-MM-DD') + ' 00:00:00'
      let yearStartTime = moment().subtract(1, 'days').year() - 1 + '-' + moment().month(moment().month()).format('MM-DD') + ' 00:00:00'
      let showStationInfoDetail = true
      let datas = {
        showStationInfoDetail, stationRankRoul, stationColor, endTime, dayStartTime, monthStartTime, yearStartTime
      }
      return datas
    },
    props: {
      currentStationInfo: {
        type: Object,
        default () {
          return {}
        }
      },
      color: {
        type: String,
        default: ''
      }
    },
    computed: {},
    methods: {},
    mounted () {
      this.stationColor.color = this.color
    },
    watch: {
      'currentStationInfo': {
        handler: function (oldVal, newVal) {
        },
        deep: true
      },
      'color': {
        handler: function (oldVal, newVal) {
          this.stationColor.color = this.color
        },
        deep: true
      }
    },
    components: {}
  }
</script>

<style>
  #stationInfoDetail {
    position: absolute;
    z-index: 1000;
    width: 420px;
    height: 100%;
    background: #173A58;
    box-shadow: 6px 0 10px 0 rgba(7, 35, 54, 0.74);
    top: 0;
    left: 0;
    overflow-x: hidden;
    overflow-y: auto;
    padding: 10px;
  }

  #stationInfoDetail .infoDetailRow {
    margin: 10px 20px;
    padding: 5px 0;
    font-size: 14px;
    color: #FFFFFF;
    background-image: linear-gradient(90deg, rgba(27, 47, 67, 0.00) 0%, rgba(255, 255, 255, 0.20) 100%);
  }

  #stationInfoDetail .infoDetailRowBackfround {
    margin: 10px 20px;
    padding: 5px 0;
    font-size: 14px;
    color: #FFFFFF;
  }

  /*滚动条样式*/
  #stationInfoDetail::-webkit-scrollbar { /*滚动条整体样式*/
    width: 8px; /*高宽分别对应横竖滚动条的尺寸*/
    height: 8px;
  }

  #stationInfoDetail::-webkit-scrollbar-thumb { /*滚动条里面小方块*/
    border-radius: 5px;
    -webkit-box-shadow: inset 0 0 5px rgba(255, 255, 255, 0.1);
    background: rgba(255, 255, 255, 0.1);
  }

  .infoDetail::-webkit-scrollbar-track { /*滚动条里面轨道*/
    -webkit-box-shadow: inset 0 0 5px rgba(255, 255, 255, 0.1);
    border-radius: 0;
    background: rgba(255, 255, 255, 0.1);
  }
</style>
